<template>
	<view class="index">
		<!-- <view class="topNav" style="position:relative;">
			<u-navbar leftText="  " title="个人中心" safeAreaInsetTop :placeholder="true" @leftClick="toWork">
				<view class="" slot="center">
					<view class="bs15 dfa" style="padding:2px" :style="{border:'1px solid'+subColor}">
						<view class="bs15 p-5-10 dfa bf" :class="act==i?'bf wei6':'cf'"
							:style="{color:act==i?'#fff':subColor,background:act==i?subColor:'#fff'}"
							v-for="(v,i) in ['桌台点餐','外带/堂食']" :key="i" @click="act=i">
							{{v}}
						</view>
					</view>
					<view v-if="act==0" class="dfa bf w100"
						style="height: 44px;position: absolute;bottom: -44px;left:0">
						<view class="f-1">
							<u-tabs :list="tabs" :current="current" lineWidth="40px" :lineColor="subColor"
								:inactiveStyle="{fontSize:'16px',color:'#111'}"
								:activeStyle="{fontSize:'16px',fontWeight:'bold',color:'#111'}" @change="tabChange">
							</u-tabs>
						</view>
						<view class="dfa h100 pr10" :style="{color:subColor}" @click="toTabels">
							<u-icon name="setting" :color="subColor" size="20"></u-icon>
						</view>
					</view>
				</view>
			</u-navbar>
		</view> -->
		<view class="bf">
			<u-tabs :list="tabs" :current="current" lineWidth="40px" :lineColor="subColor"
				:inactiveStyle="{fontSize:'16px',color:'#111'}"
				:activeStyle="{fontSize:'16px',fontWeight:'bold',color:'#111'}" @change="tabChange">
			</u-tabs>
		</view>
		<view class="f-1">
			<tabelOrder :list="tabelList" @hNav="hNav" :tc="tabelConunt"></tabelOrder>
		</view>
		<view class="f-1" v-if="act===1">
			<!-- <orderMeal :dataList="dataList"></orderMeal> -->
		</view>
	</view>
</template>

<script>
	import tabelOrder from './components/tabelOrder.vue'
	import orderMeal from './components/orderMeal.vue'
	export default {
		components: {
			tabelOrder,
			orderMeal
		},
		onPullDownRefresh() {
			this.getTableList()
			this.getTableConunt()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				act: 0,
				current: 0,
				list: [],
				tabs: [],
				tabelList: [],
				storeConfig:{},
				dataList: [],
				areaId:'',
				state:'',
				tabelConunt:{},
			}
		},
		onShow() {
			this.fetchConfig()
		},
		methods: {
			async fetchConfig() {
				const {
					data
				} = await this.beg.request({
					url: this.api.storeConfigList,
					data: {
						ident: "inStoreSetting"
					}
				})
				this.storeConfig = data ? data : {}
				if(data && data.pickupSwitch ==1 && (data.orderMode.includes(1) || data.orderMode.includes(2))){
					this.fetchData()
				}else{
					uni.showToast({
						title: '堂食业务已关闭'
					});
				}
			},
			async fetchData() {
				const {
					data: {
						list
					}
				} = await this.beg.request({
					url: this.api.tableArea,
					data: {
						pageSize: 999
					}
				})
				list.unshift({ id: "", name: "全部" })
				this.tabs = list ? list : []
				if (list && list.length) {
					this.areaId = list[0].id
					this.getTableList()
					this.getTableConunt()
				}
			},
			hNav(v){
				this.state = v.state
				this.getTableList()
				this.getTableConunt()
			},
			async getTableList() {
				const {
					data: {
						list
					}
				} = await this.beg.request({
					url: this.api.inTabel,
					data: {
						areaId:this.areaId,
						state:this.state,
						pageSize: 999,
					}
				})
				this.tabelList = list ? list : []
			},
			async getTableConunt() {
				const {
					data
				} = await this.beg.request({
					url: this.api.tCount,
					data: {
						areaId:this.areaId,
						state:this.state,
					}
				})
				this.tabelConunt = data
			},
			tabChange(e) {
				this.current = e.index
				this.areaId = e.id
				this.getTableList()
				this.getTableConunt()
			},
			toWork() {
				uni.switchTab({
					url: "/pages/index/work"
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.bottom {
		/deep/.u-input__content__field-wrapper__field {
			text-align: right !important;
		}
	}

	/deep/.u-number-box__minus {
		width: 20px !important;
		height: 20px !important;
		border-radius: 50% !important;
		background: #dcf0e7 !important;
	}

	/deep/.u-number-box__input {
		background: #fff !important;
		color: #000 !important;
	}

	/deep/.u-number-box__plus {
		width: 20px !important;
		height: 20px !important;
		border-radius: 50% !important;
		background: #49c265 !important;
	}
</style>